<template>
  <div class="modelFather">
    <h1>这里是父组件</h1>
    <!-- v-model的本质 -->
    <input type="text" v-model="userName" />
    <!-- v-model的本质是下面这行代码 -->
    <!-- <input
      type="text"
      :value="userName"
      @input="userName = (<HTMLInputElement>$event.target).value"
    /> -->

    <!-- 引入子组件 -->
    <!-- 在组件标签上使用v-model指令 -->
    <!-- <modelSon v-model="userName"></modelSon> -->
    <!-- 在组件标签上使用v-model的本质 -->
    <!-- <modelSon :modelValue="userName" @update:model-value="$event"></modelSon> -->
    <!-- 测试model原生事件 -->
    <!-- 1.自定义事件modelValue绑定userName，给子组件发送input的数据 -->
    <!-- 2.@update:model-value用于接收子组件emit发送数据并绑定在userName变量上 -->
    <!-- <modelSon
      :modelValue="userName"
      @update:model-value="userName = $event"
    ></modelSon> -->
    <!-- 3.也可以更换value,例如改成abc, -->
    <modelSon v-model:abc="userName" @update:abc="userName = $event"></modelSon>
    <!-- 4.本质代码如下 -->
    <modelSon :abc="userName" @update:abc="userName = $event"></modelSon>
  </div>
</template>
<script lang="ts" setup>
import emitter from "@/utils/emitter";
import { ref, watch } from "vue";
import modelSon from "./modelSon.vue";
// v-model的本质
let userName = ref("");
emitter.on("a", (val) => {
  console.log("update事件被触发", val);
});
watch(
  userName,
  (oldval) => {
    console.log(oldval, "====oldval"); //监听input中的userName变化
  },
  { deep: true }
);
</script>
<style scoped>
.modelFather {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>